<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/global.css" media="all">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/table.css" />
	</head>

	<body>
		<div class="admin-main">

			<fieldset class="layui-elem-field">
				<legend>产品列表</legend>
				<div class="layui-form-item" style="margin-top:20px;">
					<div class="layui-inline">
						<label class="layui-form-label">关键字</label>
						<div class="layui-input-inline">
							<input type="text" name="keyword" id="keyword" autocomplete="off"
								class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">方米立货号</label>
						<div class="layui-input-inline">
							<input type="text" name="waybillId" id="waybillId" autocomplete="off"
								class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">产品状态</label>
						<div class="layui-input-inline">
							<select name="modules" class="layui-input" id="status">
								<option value="0">待出售</option>
								<option value="1">已出售</option>
								<option value="2">暂不出售</option>
								<option value="">所有状态</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">产品类型</label>
						<div class="layui-input-inline">
							<select name="category" class="layui-input" id="category">
								<option value="">所有产品</option>
								<option value="factory">工厂产品</option>
								<option value="family">饭团产品</option>
								<option value="promote">促销产品</option>
								<option value="special">特价福利</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<a href="javascript:;" class="layui-btn" id="refresh">
							查询
						</a>
						<a href="javascript:;" class="layui-btn layui-btn-primary" id="reset">
							重置
						</a>
					</div>
					<div class="layui-inline" style="float:right">
						<a href="javascript:;" class="layui-btn layui-btn-danger" id="delbtn">
							删除选中记录
						</a>
					</div>
				</div>
				<div class="layui-field-box">
					<table class="site-table table-hover">
						<thead>
							<tr>
								<th><input type="checkbox" class="all-checkbox"></th>
								<th>序号</th>
								<th>产品编号</th>
								<th>产品类别</th>
								<th width="250px;">标题</th>
								<th>方米立货号</th>
								<th>产品提供日期</th>
								<!-- <th>查看内容</th> -->
								<!-- <th>类别</th> -->
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="tabContent">

						</tbody>
					</table>

				</div>
			</fieldset>
			<div class="admin-table-page">
				<div id="page" class="page" style="display:inline-block;max-width:500px">
				</div>
				<span style="float: right;
					margin-right: 60px;
					margin-top:1px;">总订单数共 <span id="total">0</span> 条记录</span>
			</div>
		</div>
		<script type="text/javascript" src="plugins/layui/layui.js"></script>
		<script>
		layui.config({
			base: 'plugins/layui/modules/'
		});
		var productCategory={
			"family":'饭团产品',
			"factory":'工厂产品',
			"promote":'促销产品',
			"special":'特别福利',
		}
		layui.use(['icheck', 'laypage','layer'], function() {
			var $ = layui.jquery,
					laypage = layui.laypage,
					layer = parent.layer === undefined ? layui.layer : parent.layer;

			//页面初始化的时候执行
			$(function (){
				$('.all-checkbox').click(function ($event) {
					$('.tb-checkbox').prop('checked', $event.target.checked);
				})

				query() ;

				$('#delbtn').click(function ($event) {
					$event.preventDefault();
					//示范一个公告层
					var delIndex = layer.open({
						type: 1
						, title: ['删除提示', 'font-size:18px;'] //不显示标题栏
						, closeBtn: false
						, area: '300px;'
						, shade: 0.8
						, id: 'LAY_layuipro' //设定一个id，防止重复弹出
						, btn: ['确认删除', '取消']
						, btnAlign: 'c'
						, moveType: 1 //拖拽模式，0或者1
						, content: '<div style="padding: 20px ">删除后数据不可恢复，是否确认删除？</div>'
						, yes: function (layero) {
							delHandler();
							layer.close(delIndex);
						}
					});
				});
			});

			//点击刷新按钮
			$('#refresh').on('click', function () {
				query();
			});
			function query(flag , currPage) {
				var waybillId = $('#waybillId').val();
				var status = $('#status').val();
				var category = $('#category').val();
				var keyword = $('#keyword').val() || '';
				getData({ 
					curr: currPage || 1,
					waybillId: waybillId,
					keyword: keyword || '',
					status: status,
					category: category
				}, flag);

			}
			$('#reset').on('click', function () {
				$('#category').val('');
				$('#waybillId').val('');
				$('#keyword').val('');
				$('#status').val('0');
				// getData({ curr: 1, waybillId: '', status: '0' },true);
				query(true);
			});


			//查看产品详情
			$('#tabContent').on('click', '.product-detail', function() {
				var obj = $(this);
				var id = obj.parents('tr').attr('id');
				$.post("/admin/products_content",{id:id},function(result){
					if(result.status==="success"){
						var content=result.data;
						//驾驶证信息弹窗
						layer.open({
							type: 1 //Page层类型
							,area: ['1000px', '800px']
							,title: '详情'
							,shade: 0.6 //遮罩透明度
							,maxmin: true //允许全屏最小化
							,anim: 1 //0-6的动画形式，-1不开启
							,content: content
						});
					}else{
						layer.msg('获取信息失败!', {
							icon: 1,
							time: 1000
						});
					}
				});
			});
			//edit-prod
			$('#tabContent').on('click', '.edit-prod', function (e) {
				e.preventDefault();
				e.stopPropagation();
				var obj = $(this);
				var id = obj.parents('tr').attr('id');
				layer.open({
					type: 1 //Page层类型
					, area: ['1000px', '800px']
					, title: '编辑信息' + id
					, shade: 0.6 //遮罩透明度
					, maxmin: true //允许全屏最小化
					, anim: 2, //0-6的动画形式，-1不开启
					content: '<iframe src="/admin/edit_products.html" style="width:100%;height:100%"/>' //注意，如果str是object，那么需要字符拼接。
				});
				
			})
			/*删除分类*/
			$('#tabContent').on('click', '.deal-order', function (e) {
				e.preventDefault();
				e.stopPropagation()
				var obj = $(this);
				var id = obj.parents('tr').attr('id');

				layer.open({
					title:'更改产品状态',
					content: '<div class="layui-inline">'+
						'<label class= "layui-form-label" > 产品状态</label>'+
							'<div class="layui-input-inline"> '+
								'<select name="modules" class="layui-input" id="dealStatus"> '+
									'<option value="0">待出售</option> '+
									'<option value="1">已出售</option> '+
									'<option value="2">暂不出售</option> '+
								'</select> '+
							'</div> '+
					'</div>',
					yes: function (index, layero) {
						var status= layero.find('#dealStatus').val();
						// layer.close(index); //如果设定了yes回调，需进行手工关闭
						$.post("/admin/deal_product", { id: id , status: status}, function (result) {
							if (result.status === "success") {
								layer.msg('处理完成!', {
									icon: 1,
									time: 1000
								});
								layer.close(index);
								query(true);
							} else {
								layer.msg('系统错误!', {
									icon: 1,
									time: 1000
								});
							}
						});
					}
				});   
			});

			var statusObj={
				"0":"待出售",
				"1":"已出售",
				"2":"暂不出售",
				" ":"未知",
			};
			
			//从后台获取数据函数，获取页数curr的数据
			function getData(qryParams, flag) {
				$('.all-checkbox').prop('checked', false);
				var curr = qryParams.curr;
				$.post("/admin/get_products", { 
						curr: curr,
						status: qryParams.status,
						waybillId: qryParams.waybillId,
						keyword: qryParams.keyword.trim(),
						category: qryParams.category 
					}, 
					function (result) {
					if (!flag) {
						layer.msg('查询成功');
					}
					//拼接html内容
					var tabContent = "";
					//获取后台json数据
					var mydata = result.data;

					for (var i = 0; i < mydata.length; i++) {
						var pd = mydata[i];
						if (pd.supplyTime && pd.supplyTime.indexOf('T') !== -1) {
							pd.supplyTime = pd.supplyTime.split('T')[0];
						}
						dealStr = '<span class="layui-btn layui-btn-normal layui-btn-mini product-detail"> 预览内容</span>&nbsp;&nbsp;&nbsp;<span class="layui-btn layui-btn-normal layui-btn-mini deal-order">改状态</span>'+
						'&nbsp;&nbsp;&nbsp;<span class="layui-btn layui-btn-normal layui-btn-mini edit-prod">编辑</span>';

						var tempStr = '<tr id=' + mydata[i]._id + '>' +
							/*序号分页后也必须得变动,每页十条数据*/
							'<td><input type="checkbox" class="tb-checkbox" data-id="' + mydata[i]._id + '"></td>' +
								// '<td>' + (i + (curr - 1) * 10 + 1) + '</td>' +
								'<td>' + (mydata[i].order || '') + '</td>' +
							'<td width="220px;">' + mydata[i].productNo + '</td>' +
							'<td>' + productCategory[pd.category] + '</td>' +
							// '<td><a target="_blacnk" style="color:blue" href="' + mydata[i].from + '">点击跳转查看</a></td>' +
							'<td  width="250px;">' + mydata[i].title + '</td>' +
							'<td  width="150px;">' + mydata[i].waybillId + '</td>' +
							'<td>' + pd.supplyTime + '</td>' +
							// '<td><span class="layui-btn layui-btn-normal layui-btn-mini product-detail"> 查看内容</span ></td>' +
							'<td>' + (statusObj[mydata[i].status] || '') + '</td>' +
							'<td>' +
							dealStr +
							'</td>' +
							'</tr>'
						tabContent = tabContent + tempStr;
					}
					//将拼接好的数据填入#tabContent中
					$("#tabContent").html(tabContent);
					$("#total").html(result.total || 0);
					//显示分页
					laypage({
						cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
						pages: result.pages, //通过后台拿到的总页数
						curr: curr || 1, //当前页
						jump: function (obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								query(false, obj.curr);
							}
						}
					});

				});
			};
			/* 删除操作 */
			function delHandler() {
				var selectedRows = document.getElementsByClassName('tb-checkbox');
				var ids = [];
				for (var i = 0; i < selectedRows.length; i++) {
					if (selectedRows[i].checked) {
						ids.push(selectedRows[i].getAttribute('data-id'));
					}
				}
				if (!ids.length) {
					layer.alert('请选择需要删除的记录！', { icon: 5 });
					return;
				}
				$.post('/admin/remove_products', { id: ids }, function (result) {
					if (result && result.status === 'success') {
						layer.msg('删除成功！');
						query(true);
						return;
					}
				});
			}

		});
	</script>
	</body>

</html>